<template>
    <div class="signUpCourseBox">
        <!-- 搜索栏 start-->
        <div class="invite-sub">
            <img class="invite-logo" src="../../static/image/icon-title.png" alt="">
            <span class="inviteSearch">
              <input type="text" placeholder="搜索">
              <img src="../../static/image/sousuo.png" alt="">
            </span>
        </div>
        <!-- 搜索栏 end-->
        <!-- nav -->
        <userNav></userNav>
        <!-- nav end-->
        <!-- main start-->
        <div class="invite-course">
            <div class="public-header">
              <h2 class="public-header-ch">可报名课程</h2>
              <p class="public-header-en">REGISTERED COURSER</p>
              <div class="public-header-line"></div>
            </div>
            <div class="invite-course-table">
              <table>
                <thead>
                  <tr>
                    <th>课程名称</th>
                    <th>开课日期</th>
                    <th>开课时间</th>
                    <th>人数</th>
                    <th>管理操作</th>
                  </tr>
                </thead>
                <tbody>
                    <tr  style="text-align:center" v-if="inviteCourse.length == 0 "><td colspan='5'>暂无数据</td></tr>
                  <tr v-for="course in inviteCourse" :key="course.courseId" v-if="inviteCourse.length != 0">
                      
                    <td>{{course.courseName}}</td>
                    <td>{{course.startTime | timeToYMD}}</td>
                    <td>{{course.startTime | timeToHMS}}</td>
                    <td>{{course.numberOfPeople}}</td>
                     <td>
                        <el-button type="text" class="enroll" @click="apply(course.courseId)" ><img src="../../static/image/icon-sign.png" alt="">报 名</el-button>
                        <!-- <span class="enroll-already">已报名</span>
                        <span class="enroll-already">已额满</span> -->
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <!-- page start-->
              <el-pagination background layout="prev, pager, next" :total="listTotal" @current-change="getAllData()" v-show="listTotal!=0">
                  
              </el-pagination>
            <!-- page end-->
        </div> 
        <!-- main end-->  
        <!-- 已报名 Dialog-->
        <el-dialog  class="signup"
        title=""
        :visible.sync="dialogAlreadysign">
        <div class="choose-team">
            <p>报名 <span>{{courseTime}}</span><span>{{courseName}}</span></p>
            <p>选择组别</p>
            <div class="signup-team">
                <div class="team-list" v-for="(team,type) in teams" :key="team.teamId" @click="selected(type),chose(team.teamId)" >
                    <p :class="{teamActive:activeType==type}" class="team-name">{{team.teamName}}</p>
                    <div class="team-member" v-for="member in team.teamMembersInfoList" :key="member.id"> 
                        <p >
                            <span>{{member.name}}</span>
                            <span class="phoneNumber">{{member.mobile}}</span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="ChooseTranslation()">确 认</el-button>
            <!-- <el-button type="primary" @click="dialogAlreadysign = false">确 认</el-button> -->
        </span>
        </el-dialog>   

        <!-- 报名确认 -->
        <el-dialog
            title=""
            :visible.sync="confirmDialog"
            width="30%" class='confirmDialog'
            >
            <div class='singTe'>您已向管理员申报</div>
            <p class='singTe'>
                <span>{{dStartTime|toYmdStr}}</span>
                <span>《{{dCourseName}}》</span>
            </p>
            <p class='singTe'>请等待管理员审核</p>
            <span slot="footer" class="dialog-footer" >
                
                <el-button type="primary" @click="confirmDialog = false">确认</el-button>
            </span>
        </el-dialog>

        <!-- 报名确认 end-->        
    </div>
</template>
<script>
    // nav 组件
    import userNav from '../components/userNav.vue'
    export default {
        components:{
            userNav:userNav
        },
      data() {
        return {
            // 总条数
            listTotal:0,
            //点击切换组别样式
            activeType:'',
            name:'报名课程',
            courseTime:'2018年5月20日',
            courseName:'《像CEO一样思考》商战模拟 公开课',
            // 已报名 Dialog
            dialogAlreadysign: false,
            //选择组别
            teams:[],
            //邀请课程
            inviteCourse:[],
            // 记录全局课程id，用于确定接口
            courseId:0,
            // 记录全局队伍id，用于确定接口
            teamId:0,
            // 报名确认dialog
            confirmDialog:false,
            dCourseName:'',
            dStartTime:'',

        }
    },
      methods:{
        //点击切换组别样式
        selected:function(type){
            this.activeType = type
        },

        // 获取所有数据 
        getAllData(currentPage = 1 ){
            let userId = JSON.parse(sessionStorage.getItem('login')).id;
            let mobile = JSON.parse(sessionStorage.getItem('login')).mobile;
            let data = {
                userId : userId,
                mobile : mobile,
                pageNow:currentPage,
                pageSize:5,
                
            }
            console.log(data)
            this.$http.registedCourse(data,(res)=>{
                this.inviteCourse = res.data.myCourseList;
                this.listTotal = res.data.count;
                console.log(res)
            },(errRes)=>{
                console.log(errRes)
            })
        },
        // 报名
        apply(courseId){
            let userId = JSON.parse(sessionStorage.getItem('login')).id;
            this.courseId = courseId
            let data = {
                userId : userId, 
                courseId : courseId,
                courseId : courseId,
            }
            console.log(data)
            this.$http.studentApply(data,(res)=>{
                if(res.errCode == 0 ){
                    this.dialogAlreadysign = true;
                    this.teams = res.data;
                }
            },(errRes)=>{
                console.log(errRes)
            })
        },
        chose(teamId){
            this.teamId = teamId
        },

        // 选择队伍确认
        ChooseTranslation(courseId){
            let userId = JSON.parse(sessionStorage.getItem('login')).id;
            let mobile = JSON.parse(sessionStorage.getItem('login')).mobile;
            // let courseId = this.course.courseId;
            let data = {
                userId : userId,
                mobile : mobile,
                courseId : this.courseId,
                teamId : this.teamId
            }
            console.log(data);
            //debugger
            this.$http.selectTeam(data,(res)=>{
                if(res.errCode == 0){
                    this.confirmDialog = true;
                    this.dCourseName = res.data.courseName;
                    this.dStartTime = res.data.startTime;
                    
                }
                console.log(res)
            },(errRes)=>{
                console.log(errRes)
            })
        },
        
       
   
      },
      computed: {
        
      },
      created(){

      },
      mounted(){
          this.getAllData();
          

      },
    }
  </script>